<style lang="scss">
.q-field {
  input {
    height: 100%;
    flex: 1;
  }
}
</style>

<template>
  <view class="q-field bg-cell">
    <view class="px-3 py-2 mt-5 bdb-1" v-if="title">
      <span class="fz-14 op-5">{{ title }}</span>
    </view>
    <view
      class="px-4 pos-r"
      :class="{
        'bdb-1': border,
      }"
      :hover-class="clickable ? 'btn-1' : null"
      @click="$emit('click')"
    >
      <view class="al-c" :style="{ height }">
        <view
          class="shrink-0 lh-12"
          :style="{
            minWidth: '50px',
          }"
        >
          <slot name="label">
            <view class="fz-16 fw-">{{ label }}</view>
          </slot>
          <slot name="hint">
            <view class="fz-12 op-4 mt-1" v-if="hint">{{ hint }}</view>
          </slot>
        </view>
        <view class="ml-4 flex-1 al-c f-end h100p">
          <slot>
            <span class="op-8">{{ value }}</span>
          </slot>
        </view>

        <u-icon name="arrow-right" size="14px" v-if="arrow"></u-icon>
      </view>
      <slot name="mask" />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    height: {
      type: String,
      default: "58px",
    },
    title: String,
    label: String,
    value: String,
    hint: String,
    border: {
      type: Boolean,
      default: true,
    },
    clickable: {
      type: Boolean,
    },
    arrow: Boolean,
  },
};
</script>
